<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>计算属性：用来做计算的一个属性，对原始数据加工，得出新的数据——computed</p>
    <p>依赖缓存，使用场景：计算量较大，反复展示</p>
    <p>计算属性和函数的对比：反复调用时计算属性会从缓存中读取值；函数是调用几次就执行几次。当数据更新时，都会重新计算</p>
    <p>watch和computed:wathc一对多，监听一个根本原因，其他多个事件由此引发；computed：多对一，多个因素共同作用得出一个结果</p>
    <!-- 耦合度高 -->
    <!-- <p>{{ message.split('').reverse().join('') }}</p> -->
    <!-- 计算属性 -->
    <p>{{reverseMsg}}</p>
    <hr>
    <table border="1">
      <tr>
        <td>名称</td>
        <td>价格</td>
        <td>数量</td>
        <td>小计</td>
      </tr>
      <tr v-for="(item, index) in cart" :key="index">
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>{{item.num}}</td>
        <td>{{item.num * item.price}}</td>
      </tr>
      <tr>
        <td colspan="2">总计</td>
        <td>{{totalNum}}件</td>
        <td>{{totalPrice}}元</td>
      </tr>
      <tr>
        <td colspan="2">总计</td>
        <td>{{totalNum}}件</td>
        <td>{{totalPrice}}元</td>
      </tr>
      <tr>
        <td colspan="2">总计</td>
        <td>{{totalNum}}件</td>
        <td>{{totalPrice}}元</td>
      </tr>
      <tr>
        <td colspan="2">总计</td>
        <td>{{totalNumFn()}}件</td>
        <td>{{totalPriceFn()}}元</td>
      </tr>
      <tr>
        <td colspan="2">总计</td>
        <td>{{totalNumFn()}}件</td>
        <td>{{totalPriceFn()}}元</td>
      </tr>
      <tr>
        <td colspan="2">总计</td>
        <td>{{totalNumFn()}}件</td>
        <td>{{totalPriceFn()}}元</td>
      </tr>
    </table>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        message: 'hello, vue',
        cart: [
          { name: 'iphone', price: 5000, num: 2 },
          { name: 'P40', price: 6000, num: 3 },
          { name: 'mi 11', price: 4500, num: 5 },
        ]
      },
      computed: {
        reverseMsg() {
          return this.message.split('').reverse().join('')
        },
        // 计算总数量
        totalNum() {
          console.log('computed');
          let num = 0;
          this.cart.forEach(item => {
            num += item.num
          });
          return num
        },
        // 计算总金额
        totalPrice() {
          let num = 0;
          this.cart.forEach(item => {
            num += item.num * item.price
          });
          return num
        }
      },
      methods: {
        // 计算总数量
        totalNumFn() {
          console.log('fn');
          let num = 0;
          this.cart.forEach(item => {
            num += item.num
          });
          return num
        },
        // 计算总金额
        totalPriceFn() {
          let num = 0;
          this.cart.forEach(item => {
            num += item.num * item.price
          });
          return num
        }
      },
    })
  </script>
</body>

</html>